<template>
    <view class="wrap">
    <u-navbar :is-back="true" back-icon-color="#ffffff" title-color="#ffffff" title="产品明细..." :background="background"></u-navbar>
        <view class="demo-warter" >
            <view class="u-wrap">
                <!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
                <u-image width="100%" height="220px" :src="productItem.productLogoPath[0].url"></u-image>
            </view>

            <view class="demo-title">{{ productItem.productName }}</view>
            <view class="demo-tag">
                <!--<view class="demo-tag-owner">自营</view>-->
                <!--<view class="demo-tag-text">放心购</view>-->
                <view v-for="(item, i) in productItem.productDisplayParam" :class="{ 'demo-tag-owner': i==0, 'demo-tag-text': i==1,'demo-tag-thrid':i==2 }">
                    {{item.value}}
                </view>
            </view>
            <view class="demo-shop">{{ productItem.shopNames }}</view>
            <view class="demo-price u-text-right">{{ productItem.productSalsePrice }}</view>
            <view class="demo-tabs">
                <u-line class="u-text-left" style="float: left;margin-right: 4px;" color="black" hair-line="2px"  direction="col" length="20px"/>
                规格参数
            </view>
            <u-table class="u-table">
                <u-tr>
                    <u-th>参数</u-th>
                    <u-th>说明</u-th>
                </u-tr>
                <u-tr v-for="param in productItem.productSpecParam " :key="param.key">
                    <u-td>{{param.key}}</u-td>
                    <u-td>{{param.value}}</u-td>
                </u-tr>
                
            </u-table>
            <view class="demo-tabs">
                <u-line class="u-text-left" style="float: left;margin-right: 4px;" color="black" hair-line="2px"  direction="col" length="20px"/>
                商品介绍
            </view>
            <view class="u-content">
                <u-parse :html="productItem.productIntroduce" ></u-parse>
            </view>

        </view>
        <view class="navigation">
            <view class="buy btn u-line-1" @click="submitBuyIdea(productItem.productId)">提交购买意向</view>
        </view>
        <!--提交意向-->
        <u-popup  v-model="popupShow" mode="center" height="160px" closeable>
            <view style="margin-top: 30px;">
                <u-field
                        v-model="userName"
                        label="姓名"
                        maxlength="32"
                        required
                        :error-message="errorNameMessage"
                        placeholder="请填写姓名"
                >
                </u-field>
                <u-field
                        v-model="userPhone"
                        label="手机号"
                        required
                        maxlength="16"
                        :error-message="errorMessage"
                        placeholder="请填写手机号"
                >
                </u-field>
            </view>
            <view class="u-m-t-12" style="text-align: center">
                <u-button type="error" ripple="true" shape="circle" size="medium" @click="saveTsOrderPurpose" throttle-time="1000">提交意向</u-button>
            </view>

        </u-popup>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
    export default {

        name: "index",
        data() {
            return {
                productId:'',
                /**.手机号*/
                userPhone:'',
                errorMessage:'',
                userName:'',
                errorNameMessage:'',
                popupShow:false,
				id:null,
				productItem:null,
                background: {
                    //backgroundColor: '#19be6b',
                    // 导航栏背景图
                    //background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
                    // 还可以设置背景图size属性
                    // backgroundSize: 'cover',

                    // 渐变色
                    backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
                },
                detailList: {
                    price: 35,
                    title: '北国风光，千里冰封，万里雪飘',
                    shop: '李白杜甫白居易旗舰店',
                    image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
                },
                content: ``
            }
        },
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			this.selectTsProduct()
		},
        methods:{
            //保存用户意向
            saveTsOrderPurpose:function () {
                this.errorMessage='';
                this.errorNameMessage='';
                let  userNameFlg= this.$u.test.isEmpty(this.userName);
                if(null == this.userName || '' == this.userName || undefined ==this.userName){
                    this.errorNameMessage='用户名不能空';
                    return false
                }
                let flg =  this.$u.test.mobile(this.userPhone);
                if(!flg){
                    this.errorMessage='手机号不正确';
                    return false
                }

                this.$u.api.saveTsOrderPurpose({
                    'custName':this.userName,
                    'custPhone': this.userPhone,
                    'productId':this.productId
                }).then(res=>{
                    this.popupShow=false;
                    this.$refs.uToast.show({
                        title: '已经收到您的提交',
                        type: 'success'
                    });

                })
            },
			moneyHandle(item) {
				let money = 0.0;
				let unit = '元/-';
				if (item && item.productSalsePrice) {
					money = Number(item.productSalsePrice / 100).toFixed(2);
				}
			
				if (item && item.productUnit) {
					unit = '元/' + item.productUnit;
				}
				item.productSalsePrice = money + unit;
			},
			selectTsProduct(){
				this.$u.api.selectTsProduct({
						'id': this.id
					}).then(res=>{
						console.log(res);
						this.productItem = res;
						this.moneyHandle(this.productItem)
					})
			},
            /**.提交购买意向*/
            submitBuyIdea: function(productId) {
                this.productId=productId;
                this.popupShow=true
            },
        }
    }
</script>

<style lang="scss" scoped>
    .demo-warter {
        border-radius: 8px;
        margin: 5px;
        background-color: #ffffff;
        padding: 8px;
        position: relative;
        padding-bottom: 54px;

    }
    .demo-image {
        width: 100%;
        border-radius: 4px;
    }

    .demo-title {
        font-size: 30rpx;
        margin-top: 5px;
        color: $u-main-color;
        word-break: break-all;
    }

    .demo-tag {
        display: flex;
        margin-top: 5px;
        margin-bottom: 15px;
    }
    .demo-tabs{
        margin-top: 5px;
        margin-bottom: 15px;
    }
    .demo-tag-owner {
        background-color: $u-type-error;
        color: #ffffff;
        display: flex;
        align-items: center;
        padding: 4rpx 14rpx;
        border-radius: 50rpx;
        font-size: 20rpx;
        line-height: 1;
    }

    .demo-tag-text {
        border: 1px solid $u-type-primary;
        color: $u-type-primary;
        margin-left: 10px;
        border-radius: 50rpx;
        line-height: 1;
        padding: 4rpx 14rpx;
        display: flex;
        align-items: center;
        border-radius: 50rpx;
        font-size: 20rpx;
    }

    .demo-price {
        font-size: 30rpx;
        color: $u-type-error;
        margin-top: 5px;
    }

    .demo-shop {
        font-size: 22rpx;
        color: $u-tips-color;
        margin-top: 15px;
    }

    .navigation {
        position: fixed;
        bottom: 0rpx;
        left: 0;
        width: 100%;
        border: solid 2rpx #f2f2f2;
        background-color: #ffffff;
        padding: 16rpx 0;
        .btn {
            font-size: 28rpx;
            line-height: 66rpx;
            padding: 0 30rpx;
            border-radius: 36rpx;
            color: #ffffff;
            float: right;
            margin-right: 20px;
            background-color: #ff7900;
        }

    }
    .u-table {
        width: 100%;
        box-sizing: border-box;
    }
    .u-content {
        /*margin-top: 15px;*/
    }
    .demo-warter .u-wrap{
        height: 220px;
    }

</style>